import React from 'react';
import { List, Typography, Tooltip } from 'antd';
import { CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';

// 定义新的数据结构
interface ListItem {
    alarm_config_name: string; // 显示的数据
    alarm_event_alarm_status: number; // 状态
    alarm_event_result_time: string; // 时间
}

// 定义 props 的类型
interface SmallSizeListProps {
    data: ListItem[]; // data 为 ListItem 数组
    chartTitle: string; // 传入的标题
}

const PortList: React.FC<SmallSizeListProps> = ({ data, chartTitle }) => {
    // 根据 status 返回对应的图标
    const getStatusIcon = (status: number) => {
        switch (status) {
            case 0:
                return <CheckCircleOutlined style={{ color: 'green' }} />;
            case 1:
                return <CloseCircleOutlined style={{ color: 'red' }} />;
            default:
                return <InfoCircleOutlined style={{ color: 'blue' }} />;
        }
    };

    return (
        <div style={{ width: '100%', paddingLeft: '10px' }}>
            <div style={{ display: 'flex', alignItems: 'center', paddingBottom: '10px' }}>
                <Typography.Title level={5} style={{ margin: '0 10px' }}>
                    {chartTitle}
                </Typography.Title>
            </div>
            <div style={{ maxHeight: 300, overflowY: 'auto' }}>
                <List
                    size="small"
                    bordered
                    dataSource={data}
                    renderItem={(item) => (
                        <List.Item style={{ padding: '5px 1px' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
                                <Tooltip title={item.alarm_event_alarm_status || '健康状态'} placement="top">
                                    <span style={{ margin: '0 5px' }}>
                                        {getStatusIcon(item.alarm_event_alarm_status)}
                                    </span>
                                </Tooltip>
                                <Tooltip title={item.alarm_config_name} placement="top">
                                    <span
                                        style={{
                                            margin: '0 1px',
                                            flexGrow: 1,
                                            minWidth: '60px', // 设置固定宽度
                                            whiteSpace: 'nowrap',
                                            overflow: 'hidden',
                                            textOverflow: 'ellipsis',
                                        }}
                                    >
                                        {item.alarm_config_name}
                                    </span>
                                </Tooltip>
                                <Tooltip title={item.alarm_event_result_time} placement="top">
                                    <span
                                        style={{
                                            minWidth: '60px', // 设置固定宽度
                                            whiteSpace: 'nowrap',
                                            overflow: 'hidden',
                                            textOverflow: 'ellipsis',
                                        }}
                                    >
                                        {new Date(item.alarm_event_result_time).toLocaleString()}
                                    </span>
                                </Tooltip>
                            </div>
                        </List.Item>
                    )}
                />
            </div>
        </div>
    );
};

export default PortList;
